<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title>
<meta http-equiv="MSThemeCompatible" content="Yes" />
<script src="<{$ipath}>/user/js/common.js" type="text/javascript"></script>
<script src="<{$ipath}>public/js/jquery.js" type="text/javascript"></script>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=<{$key}>"></script>
<script src="<{$ipath}>artDialog/jquery.artDialog.js?skin=default"></script>
<script src="<{$ipath}>artDialog/plugins/iframeTools.js"></script>
<style type="text/css">
body, html {width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
#l-map{height:100%;width:100%;}
.demo_box{position: absolute;top:80px;left:0;z-index: 999;width: 210px;overflow: hidden;}
.demo_box #keyword{
	width: 198px;
	padding:5px;
	border: 1px solid #F3ECB9;
}
.demo_box #result1,.demo_box #result{
	background: #fff;
	overflow-y: scroll;
	height:315px;
	display: none;
	width:210px;
	padding-right: 25px;
}
.demo_box #result1 .res_box,.demo_box #result .res_box{
	width:200px;
}
.demo_box #result .res_box table{
	width:200px;
}

.demo_box #result .res_box table p{
	width:165px;
}
.demo_box #result h3{
	font-size: 14px;
}
</style>
</head>
<body id="nv_member" onLoad="mapInit()">
<input type="hidden" id="longitude" value="0" />
<input type="hidden" id="latitude" value="0" />

<div class="ftip" style="margin:0;height:70px;">(用鼠标滚轮可以缩放地图；在下面输入框中可以搜索，在左侧点击搜索结果后可以在右侧拖动图标调整位置)拖动蓝色图标到相应位置然后点击右侧链接-> <a style="float:none" href="javascript:ok();">已经设定好</a></div>
<div class="demo_box">
    <input type="text" id="keyword" name="keyword" style="color:#006699" value="" onkeydown='keydown(event)' placeholder="输入关键词搜索地理位置"/>
    <div id="result1" name="result1"></div>
    <div id="r_title"></div>
    <div id="result"></div>
</div>
<div id="l-map"></div>

<script type="text/javascript">
if (art.dialog.data('longitude')) {
	document.getElementById('longitude').value = art.dialog.data('longitude');// 获取由主页面传递过来的数据
	document.getElementById('latitude').value = art.dialog.data('latitude');
};
// 关闭并返回数据到主页面
function ok() {
	var origin = artDialog.open.origin;
	var longitudeinput = origin.document.getElementById('longitude');
	var latitudeinput = origin.document.getElementById('latitude');
	longitudeinput.value = $('#longitude').attr('value');
	latitudeinput.value = $('#latitude').attr('value');
	art.dialog.close();
};

var mapObj;

//选择搜索位置
function addCoordinate(Lng,Lat,obj){
	$('#longitude').attr('value',Lng);
	$('#latitude').attr('value',Lat);
	mapInit();
}


function mapInit() {
	if(typeof(mapObj) != 'undefined'){
   		marker     = [];
    	mapObj.clearMap();
	}

	if($('#longitude').val()&&$('#longitude').val()!=0){
	    mapObj = new AMap.Map("l-map", {
	        //二维地图显示视口
	        view: new AMap.View2D({
	            center:new AMap.LngLat($('#longitude').val(),$('#latitude').val()),//地图中心点
	            zoom:17 //地图显示的缩放级别
	        })
	    });
	}else{
		mapObj = new AMap.Map("l-map");
	}

    var marker = new AMap.Marker({
        position:mapObj.getCenter(),
        draggable:true, //点标记可拖拽
        cursor:'move',  //鼠标悬停点标记时的鼠标样式
        raiseOnDrag:true//鼠标拖拽点标记时开启点标记离开地图的效果
 
    });
    marker.setMap(mapObj);
    AMap.event.addListener(marker,'dragging',function(e){
		$('#longitude').attr('value',e.lnglat.getLng())
		$('#latitude').attr('value',e.lnglat.getLat())
	})
}

//输入提示
function autoSearch() {
    var keywords = document.getElementById("keyword").value;
    var auto;
    //加载输入提示插件
        mapObj.plugin(["AMap.Autocomplete"], function() {
        var autoOptions = {
            city: "" //城市，默认全国
        };
        auto = new AMap.Autocomplete(autoOptions);
        //查询成功时返回查询结果
        if ( keywords.length > 0) {
            AMap.event.addListener(auto,"complete",autocomplete_CallBack);
            auto.search(keywords);
        }
        else {
            document.getElementById("result1").style.display = "none";
        }
    });
}
 
//输出输入提示结果的回调函数
function autocomplete_CallBack(data) {
    var resultStr = "";
    var tipArr = data.tips;
    if (tipArr&&tipArr.length>0) {                 
        for (var i = 0; i < tipArr.length; i++) {
            resultStr += "<div class='res_box' id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
                        + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
                        + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
        }
    }
    else  {
        resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
    }
    document.getElementById("result1").curSelect = -1;
    document.getElementById("result1").tipArr = tipArr;
    document.getElementById("result1").innerHTML = resultStr;
    document.getElementById("result1").style.display = "block";
}
 
//输入提示框鼠标滑过时的样式
function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip 
    thiss.style.background = '#CAE1FF';
}
 
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复 
    thiss.style.background = "";
}
 
//从输入提示框中选择关键字并查询
function selectResult(index) {
    if(index<0){
        return;
    }
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = null;
        document.getElementById("keyword").onfocus = focus_callback;
    }
    //截取输入提示的关键字部分
    var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
	var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
    document.getElementById("keyword").value = text;
    document.getElementById("result1").style.display = "none";
    //根据选择的输入提示关键字查询
    mapObj.plugin(["AMap.PlaceSearch"], function() {       
        var msearch = new AMap.PlaceSearch();  //构造地点查询类
        AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
		msearch.setCity(cityCode);
        msearch.search(text);  //关键字查询查询
    });
}
 
//定位选择输入提示关键字
function focus_callback() {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = autoSearch;
   }
}
 
//输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
    //清空地图上的InfoWindow和Marker
    windowsArr = [];
   	marker     = [];
    mapObj.clearMap();
    var resultStr1 = "";
    var poiArr = data.poiList.pois;
    var resultCount = poiArr.length;
    for (var i = 0; i < resultCount; i++) {
        resultStr1 += "<div  class='res_box' id='divid" + (i + 1) + "' onclick='addCoordinate("+poiArr[i].location.getLng()+","+poiArr[i].location.getLat()+",this)' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:5px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
            resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
    }
    mapObj.setFitView();
    document.getElementById("result").innerHTML = resultStr1;
    document.getElementById("result").style.display = "block";
}
 
//鼠标滑过查询结果改变背景样式，根据id打开信息窗体
function openMarkerTipById1(pointid, thiss) {
    thiss.style.background = '#CAE1FF';
    windowsArr[pointid].open(mapObj, marker[pointid]);
}
//添加查询结果的marker&infowindow   
function addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    var markerOption = {
        map:mapObj,
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
        position:new AMap.LngLat(lngX, latY)
    };
    var mar = new AMap.Marker(markerOption);         
    marker.push(new AMap.LngLat(lngX, latY));
 
    var infoWindow = new AMap.InfoWindow({
        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
        size:new AMap.Size(300, 0),
        autoMove:true, 
        offset:new AMap.Pixel(0,-30)
    });
    windowsArr.push(infoWindow);
    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
    AMap.event.addListener(mar, "click", aa);
}
 
//infowindow显示内容
function TipContents(type, address, tel) {  //窗体内容
    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
        type = "暂无";
    }
    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
        address = "暂无";
    }
    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
        tel = "暂无";
    }
    var str = "  <p>地址：" + address + "</p>  <p>电话：" + tel + " </p>  <p>类型：" + type+"</p>";
    return str;
}
function keydown(event){
    var key = (event||window.event).keyCode;
    var result = document.getElementById("result1")
    var cur = result.curSelect;
    if(key===40){//down
        if(cur + 1 < result.childNodes.length){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur+1;
            result.childNodes[cur+1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur+1].name;
        }
    }else if(key===38){//up
        if(cur-1>=0){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur-1;
            result.childNodes[cur-1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur-1].name;
        }
    }else if(key === 13){
        var res = document.getElementById("result1");
		if(res && res['curSelect'] !== -1){
			selectResult(document.getElementById("result1").curSelect);
		}
    }else{
        autoSearch();
    }
}

/*
var map = new BMap.Map("l-map");
var point = new BMap.Point($('#longitude').val(),$('#latitude').val());
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();                            //启用滚轮放大缩小
function myFun(result){
	var cityName = result.name;
	if($('#longitude').val()==0||$('#longitude').val()==''){
		map.setCenter(cityName);
		p = new BMap.Point(result.center.lng,result.center.lat);
	}else{
		p = new BMap.Point($('#longitude').val(),$('#latitude').val());
	}
	var marker = new BMap.Marker(p);
	marker.enableDragging();
	map.addOverlay(marker);

	marker.addEventListener("dragend", function(e){
		$('#longitude').attr('value',e.point.lng)
		$('#latitude').attr('value',e.point.lat)
	})
}

var myCity = new BMap.LocalCity();
var p=myCity.get(myFun);
*/
</script>
</body>
</html>